<template>
	<HeaderModule></HeaderModule>
	<div class="Body">
		<el-container>
			<div class="person">
				<div class="card">
					<el-popover
						placement="bottom"
						title="分享给朋友"
						:width="200"
						trigger="hover"
						content="二维码"
					>
						<template #reference>
							<div class="tip">
								<svg
									t="1666315915057"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="3385"
									width="18"
									height="18"
								>
									<path
										d="M512 939.804444c-57.612929 0-113.570909-11.274343-166.322424-33.616161-50.889697-21.514343-96.504242-52.337778-135.809293-91.539394C170.666667 775.447273 139.843232 729.729293 118.328889 678.839596 96.193939 626.191515 84.816162 570.233535 84.816162 512.620606s11.274343-113.570909 33.616161-166.322424c21.514343-50.889697 52.337778-96.504242 91.539394-135.809293 39.201616-39.201616 84.919596-70.025051 135.809293-91.539394 52.648081-22.238384 108.606061-33.616162 166.322424-33.616162h1.034344l-0.103435 57.923233h-0.930909c-98.676364 0-191.353535 38.374141-261.068282 108.192323-69.818182 69.818182-108.295758 162.495354-108.295758 261.171717s38.374141 191.353535 108.192323 261.068283c69.714747 69.818182 162.495354 108.192323 261.068283 108.192323 98.572929 0 191.250101-38.374141 261.068283-108.088889C842.78303 704.077576 881.260606 611.400404 881.260606 512.827475h57.923232c0 57.612929-11.377778 113.570909-33.616161 166.21899-21.514343 50.889697-52.337778 96.504242-91.539394 135.705858s-84.919596 69.921616-135.705859 91.43596c-52.751515 22.341818-108.606061 33.616162-166.322424 33.616161zM938.149495 352.711111h-57.923232V145.73899H672.530101v-57.923232H938.149495V352.711111z m0 0"
										p-id="3386"
										fill="#8a8a8a"
									></path>
									<path
										d="M888.371717 96.012929l40.96 40.96L560.484848 505.806869l-40.96-40.96L888.371717 96.012929z m0 0"
										p-id="3387"
										fill="#8a8a8a"
									></path></svg
								>分享
							</div>
						</template>
					</el-popover>
					<div class="img">
						<div class="img-two"></div>
					</div>
					<div class="name">
						<span class="name-container">
							<span class="account-text">aaaaaa</span>
							<span class="level">
								<i class="lv"></i>
								<i class="lv1"></i>
							</span>
						</span>
					</div>
					<div class="action-box">
						<el-dropdown trigger="hover">
							<span class="el-dropdown-link">
								管理我的主页
								<svg
									t="1666321797973"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="12346"
									width="16"
									height="16"
								>
									<path
										d="M854.016 739.328l-313.344-309.248-313.344 309.248q-14.336 14.336-32.768 21.504t-37.376 7.168-36.864-7.168-32.256-21.504q-29.696-28.672-29.696-68.608t29.696-68.608l376.832-373.76q14.336-14.336 34.304-22.528t40.448-9.216 39.424 5.12 31.232 20.48l382.976 379.904q28.672 28.672 28.672 68.608t-28.672 68.608q-14.336 14.336-32.768 21.504t-37.376 7.168-36.864-7.168-32.256-21.504z"
										p-id="12347"
										fill="#d4237a"
									></path>
								</svg>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item>编辑资料</el-dropdown-item>
									<el-dropdown-item>编辑轮播图</el-dropdown-item>
									<el-dropdown-item>编辑简介</el-dropdown-item>
									<el-dropdown-item>资源动态管理</el-dropdown-item>
									<el-dropdown-item>商品管理</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
					<div class="summary">
						<p>暂无简介</p>
					</div>
				</div>
				<div class="tag">
					<div>
						<span class="count1">0</span>
						<span class="count2">关注</span>
					</div>
					<div>
						<span class="count1">0</span>
						<span class="count2">粉丝</span>
					</div>
				</div>
			</div>
			<div class="images">
				<div class="images-i">
					<div class="images-m"></div>
				</div>
			</div>
		</el-container>
		<div class="channel">
			<div class="list">
				<span class="list-item active">资源动态</span>
				<span class="list-item">商品服务</span>
			</div>
		</div>
		<div class="show">
			<div class="show-s">
				<div class="show-h">
					<img
						src="https://rs.dance365.com/img/no_content@3x.0fd78ad2.png"
						alt=""
					/>
					<span>暂无数据</span>
				</div>
			</div>
		</div>
	</div>
	<FooterModule></FooterModule>
</template>

<script setup lang="ts">
import { ElCol, ElRow } from "element-plus"
import Footer from "../../components/footer/index.vue"
</script>

<style scoped>
.Body {
	background: #f5f7f9;
}
.el-container {
	width: 1200px;
	margin: 20px auto;
	overflow: hidden;
}
.person {
	float: left;
	background: #fff;
}
.card {
	box-sizing: border-box;
	padding-top: 22px;
	padding-bottom: 19px;
	width: 334px;
	border-radius: 4px;
}
.tip {
	cursor: pointer;
	height: 21px;
	text-align: right;
	padding-right: 19px;
	color: #7d8090;
	font-size: 14px;
}
.img {
	width: 110px;
	height: 110px;
	background: #ccc;
	border-radius: 55px;
	margin: 0 auto;
}
.img-two {
	background-image: url(https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/100/format/webp/ignore-error/1);
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
	border-radius: 50%;
}
.name {
	text-align: center;
}
.name-container {
	position: relative;
	display: inline-block;
	margin-top: 11px;
	font-size: 16px;
	line-height: 20px;
	padding: 4px 0 10px 0;
	font-family: MicrosoftYaHei;
	color: #111;
	max-width: 240px;
	word-break: break-all;
}
.account-text {
	position: relative;
	display: inline-block;
	margin-top: 11px;
	font-size: 16px;
	line-height: 20px;
	padding: 4px 0 10px 0;
	font-family: MicrosoftYaHei;
	color: #111;
	max-width: 240px;
	word-break: break-all;
}
.level {
	box-sizing: border-box;
	background: linear-gradient(#ff289b, #ff43d0);
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 0 8px;
	display: inline-block !important;
	line-height: 1.15;
	white-space: nowrap;
	cursor: pointer;
}
.lv {
	width: 15px;
	height: 10px;
	display: inline-block;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
}
.lv1 {
	width: 8px;
	height: 10px;
	display: inline-block;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(https://rs.dance365.com/level_num_1@3x.png);
}
.action-box {
	display: flex;
	width: 293px;
	height: 40px;
	align-items: center;
	justify-content: center;
	-webkit-box-pack: center;
	margin-top: 20px;
}
.el-dropdown {
	text-align: center;
	display: block;
	font-size: 16px;
	background: #fbe9f2;
	color: #f93684;
	width: 150px;
	height: 38px;
	line-height: 38px;
	border-radius: 19px;
	cursor: pointer;
}
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: visible;
}
.summary {
	width: 272px;
	height: 46px;
	font-size: 16px;
	color: #7d8090;
	line-height: 24px;
	margin-top: 16px;
	padding-left: 32px;
}
.tag {
	margin-top: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 334px;
	height: 76px;
	border-radius: 4px;
	padding-top: 16px;
}
.tag div {
	float: left;
	width: 164px;
	height: 44px;
	text-align: center;
}
.count2 {
	display: block;
	font-size: 14px;
	color: #7d8090;
}
.count1 {
	font-size: 20px;
	margin-bottom: 10px;
	color: #111;
	display: block;
}
.images {
	float: left;
	width: 850px;
	height: 452px;
	margin-left: 16px;
	background: #fff;
	position: relative;
	z-index: 9;
}
.images-i {
	border-radius: 4px;
	height: 100%;
	overflow: hidden;
}
.images-m {
	background-image: url(https://rs.dance365.com/default_head@3x.png?imageView2/0/w/1200/h/1200/format/webp/ignore-error/1);
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-position: 50%;
	background-size: cover;
	background-repeat: no-repeat;
}
.channel {
	text-align: center;
	height: 50px;
	line-height: 50px;
	color: #7d8090;
	font-size: 16px;
}
.list {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.list-item {
	padding: 10px 4px;
	margin: 0 20px;
	text-align: center;
	user-select: none;
	cursor: pointer;
}
.list-item.active {
	color: #111;
	border-bottom: 3px solid #000;
}
.show {
	width: 1200px;
	height: 700px;
	margin-left: auto;
	margin-right: auto;
}
.show-s {
	margin-top: 20px;
	padding-top: 20px;
}
.show-h {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	min-height: 600px;
}
</style>
